<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APP 下载</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./envConfig.js"></script>
    <style>
        /* 全局样式 */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: Arial, sans-serif;
            overflow: hidden;
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        /* 下载容器 */
        .download-container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
            text-align: center;
            width: 90%;
            max-width: 500px;
            z-index: 1;
        }
        /* 应用标志 */
        .app-logo {
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            border-radius: 50%;
            object-fit: cover;
        }
        /* 应用名称 */
        .app-name {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        /* 应用版本 */
        .app-version {
            font-size: 18px;
            color: #666;
            margin-bottom: 30px;
        }
        /* 下载按钮 */
        .download-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .download-button {
            width: 100%;
            padding: 15px;
            font-size: 16px;
            color: #fff;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s, transform 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        .download-button:hover {
            transform: translateY(-2px);
        }
        .download-button.disabled {
            background-color: #ccc;
            pointer-events: none;
        }
        /* 安卓下载按钮 */
        .android-download {
            background-color: #3ddc84;
        }
        .android-download:hover {
            background-color: #28a745;
        }
        /* iOS下载按钮 */
        .ios-download {
            background-color: #007AFF;
        }
        .ios-download:hover {
            background-color: #0051A8;
        }
        /* 装饰元素 */
        .decorative-shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.2;
            animation: float 25s infinite ease-in-out;
        }
        .shape1 {
            width: 150px;
            height: 150px;
            background: rgba(255, 107, 107, 0.3);
            top: -75px;
            left: -75px;
        }
        .shape2 {
            width: 200px;
            height: 200px;
            background: rgba(252, 165, 3, 0.3);
            bottom: -100px;
            right: -100px;
            animation-duration: 30s;
        }
        .shape3 {
            width: 100px;
            height: 100px;
            background: rgba(29, 209, 161, 0.3);
            top: 30%;
            left: 50%;
            transform: translateX(-50%);
            animation-duration: 20s;
        }
        .shape4 {
            width: 120px;
            height: 120px;
            background: rgba(84, 160, 255, 0.3);
            bottom: 20%;
            left: 20%;
        }
        .small-decor {
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            position: absolute;
            animation: float 15s infinite ease-in-out;
        }
        .small-decor:nth-child(6) {
            top: 80%;
            left: 15%;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.4);
            animation-duration: 20s;
        }
        /* 浏览器提示 */
        .brower {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6);
            flex-direction: column;
            align-items: flex-end;
            padding: 20px;
        }
        .brower-text {
            font-size: 20px;
            color: #fff;
            margin: 5px 0;
        }
        /* 动画 */
        @keyframes float {
            0% { transform: translate(0, 0); }
            50% { transform: translate(15px, 15px); }
            100% { transform: translate(0, 0); }
        }
        /* 响应式设计 */
        @media (max-width: 600px) {
            .download-container {
                padding: 20px;
            }
            .app-name {
                font-size: 22px;
            }
            .app-version {
                font-size: 16px;
                margin-bottom: 20px;
            }
            .download-button {
                padding: 12px;
                font-size: 14px;
            }
            .shape1 {
                width: 100px;
                height: 100px;
                top: -50px;
                left: -50px;
            }
            .shape2 {
                width: 150px;
                height: 150px;
                bottom: -75px;
                right: -75px;
            }
            .shape3 {
                width: 70px;
                height: 70px;
                top: 25%;
                left: 50%;
                transform: translateX(-50%);
            }
            .shape4 {
                width: 90px;
                height: 90px;
                bottom: 15%;
                left: 15%;
            }
            .small-decor {
                width: 20px;
                height: 20px;
                top: 5%;
                right: 5%;
            }
            .small-decor:nth-child(6) {
                top: 75%;
                left: 10%;
                width: 30px;
                height: 30px;
            }
        }
    </style>
</head>
<body>
    <!-- 装饰性图形 -->
    <div class="decorative-shape shape1"></div>
    <div class="decorative-shape shape2"></div>
    <div class="decorative-shape shape3"></div>
    <div class="decorative-shape shape4"></div>
    <div class="decorative-shape small-decor"></div>
    <div class="decorative-shape small-decor"></div>

    <div class="download-container">
        <img src="" id="logo" alt="APP Logo" class="app-logo">
        <div class="app-name" id="name">APP</div>
        <p class="app-version" id="version">版本 0.0.0</p>
        <div class="download-buttons" id="downloadButtons">
            <!-- 下载按钮将由JavaScript动态生成 -->
        </div>
    </div>
    <div class="brower" id="brower">
        <span class="brower-text">点击右上角 ···</span>
        <span class="brower-text">选择在浏览器打开</span>
    </div>

    <script>
        const ENV_IP = window.getVueEnv('VUE_APP_API_BASE_URL')
        const GET_VERSION_API = `${ENV_IP}/filecenter/version/getAppUploadUrl`;
        const IOS_DOWNLOAD_URL = `${ENV_IP}/usercenter/api/common/versionCode`;

        document.addEventListener('DOMContentLoaded', async () => {
            const downloadButtonsContainer = document.getElementById('downloadButtons');
            const browerElement = document.getElementById('brower');
            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
            const isAndroid = /android/i.test(userAgent);
            const isIOS = isSafari()
            try {
                const response = await axios.get(`${GET_VERSION_API}${window.location.search}`)
                const [androidInfo, iosInfo] = response.data.data;
                populateAppInfo(androidInfo);
                createDownloadButtons(true,false, androidInfo, iosInfo, downloadButtonsContainer)
                if(isIOS) {
                    createDownloadButtons(isAndroid, isIOS, androidInfo, iosInfo, downloadButtonsContainer);
                }
                if (isBrowerWechat()) {
                    browerElement.style.display = 'flex';
                }
            } catch (error) {
                console.error('获取版本信息失败:', error);
            }
        });

        function isSafari() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.indexOf('applewebkit') > -1 && ua.indexOf('mobile') > -1 && ua.indexOf('safari') > -1 &&
                ua.indexOf('linux') === -1 && ua.indexOf('android') === -1 && ua.indexOf('chrome') === -1 &&
                ua.indexOf('ios') === -1 && ua.indexOf('browser') === -1) {
                return true;
            }else{
                return false;
            }
        }

        function populateAppInfo(androidInfo) {
            document.getElementById('logo').src = androidInfo.app_log || '';
            document.getElementById('name').innerText = androidInfo.app_name || 'APP';
            document.getElementById('version').innerText = `版本 ${androidInfo.version || '0.0.0'}`;
        }

        async function createDownloadButtons(isAndroid, isIOS, androidInfo, iosInfo, container) {
            if (isIOS) {
                await createIOSButton(iosInfo, container);
            } else {
                createAndroidButton(androidInfo, container);
            }
        }

        async function createIOSButton(iosInfo, container) {
            try {
                if(iosInfo?.path && iosInfo?.path != 'code') {
                    const iosBtn = createButton('下载iOS版本', iosInfo?.path, 'ios-download');
                    container.appendChild(iosBtn);
                    return
                }
                const iosResponse = await axios.get(IOS_DOWNLOAD_URL, {
                    params: { version_id: iosInfo?.id },
                });
                if (iosInfo?.path && iosResponse.data.code === 200) {
                    const iosBtn = createButton('下载iOS版本', iosResponse.data.data.link, 'ios-download');
                    container.appendChild(iosBtn);
                } else {
                    const iosBtn = createButton('iOS版本暂未上线', '#', 'ios-download disabled');
                    container.appendChild(iosBtn);
                }
            } catch (error) {
                console.error('获取iOS下载链接失败:', error);
                const iosBtn = createButton('iOS版本暂未上线', '#', 'ios-download disabled');
                container.appendChild(iosBtn);
            }
        }

        function createAndroidButton(androidInfo, container) {
            if (androidInfo.path) {
                const androidBtn = createButton('下载安卓版本', androidInfo.path, 'android-download');
                container.appendChild(androidBtn);
            } else {
                const androidBtn = createButton('安卓版本暂未上线', '#', 'android-download disabled');
                container.appendChild(androidBtn);
            }
        }

        function createButton(text, href, className) {
            const btn = document.createElement('a');
            btn.href = href;
            btn.className = `download-button ${className}`;
            btn.textContent = text;
            return btn;
        }

        function isBrowerWechat() {
            const ua = navigator.userAgent.toLowerCase();
            return ua.includes('micromessenger');
        }
    </script>
</body>
</html>
